<template>
  <main>
    
    <!-- tab选项卡 -->
    <div class="dg-tab am-margin-bottom">
      <ul class="dg-center">
        <li class="dg-text-gray" v-for="(tab, index) in tabData" :key="index"
        @click="GameListCay(tab.id, index)"
        :class="[{ 'dgactive': index === isactive }]"  >
          <span>{{ tab.name }}</span>
        </li>
      </ul>

      <span class="open-pos dg-hide-740-down" @click="open = !open" >
        筛选&nbsp;<am-icon style="transition: all .5s;" :class="{ 'reversal': open }" size="sm" type="caret-down"></am-icon>
      </span>
    </div>


    <div class="max-width-1400 am-center">
      <!-- 筛选面板 -->
      <transition name="slide-down">
        <filter-panel v-show="open" ref="filter"/>
      </transition>

      <!-- 所有作品 -->
      <works-list ref="workslist" />
    </div>

  </main>
</template>

<script>
import Vue from 'vue'
import Header from '@/dg_components/DgHeader'
import FilterPanel from '@/views2/game/FilterPanel'
import WorksList from '@/views2/game/WorksList' 
import DgFooter from '@/views2/Footer'// 底部

export default {
  name: 'game',
  data() {
    return {
      open: true,
      isactive: 0,
      tabData:[{
        id:'0',
        name:'默认排序'
      }, {
        id:'1',
        name:'最新发布'
      }, {
        id:'2',
        name:'热度'
      }, {
        id:'3',
        name:'好评'
      }]
    }
  },
  components: {
    FilterPanel, WorksList, DgFooter,
    CHeader: Header,    
  },
  methods: {
    ready() {
    },
    GameListCay(CarID,inex2){
      this.isactive = +CarID;
      this.$refs.workslist.tabchange(CarID);//调用子件方法
    },
  },

  mounted() {
    this.ready();
  }
}
</script>

<style lang="less" scoped>
.am-sticky {
  position: fixed!important;
  z-index: 1010;
  transform-origin: 0 0;
}
.dg-tab {
  position: relative;
  z-index: 0;
  height: 60px;
  line-height: 60px;
  width: 100%;
  background-color: #FFF;
  box-shadow: 0 1px 5px #F0F0F0;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      float: left;
      padding: 0 15px;
      margin: 0 3px;
      cursor: pointer;
      span {
        padding-bottom: 3px;
        position: relative;
        bottom: -15px;
      }
      &:hover {
        .dgactive;
      }
    }
  }
}
.dgactive {
  color: #717171;
  border-bottom: 3px solid #717171;
}
.dg-center {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.open-pos {
  cursor: pointer;
  position: absolute;
  right: 120px;
  bottom: -20px;
}
</style>